<template>
  <div class="table_total">
    <div class="table-wrapper table1">
      <table class="custom-table">
        <colgroup>
          <col style="width: 20%;" />
          <col style="width: 50%;" />
          <col style="width: 30%;" />
        </colgroup>
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in tableData" :key="row.id" :class="{ 'table-row-selected': row.isSelected }"
            @click="handleRowClick(index)">
            <!-- <td>{{ row.id }}</td> -->
            <!-- 使用 index + 1 来显示顺序编号 -->
            <td>{{ index + 1 }}</td>
            <td>{{ row.regionIndex }}</td>
            <!-- <td>{{ row.regionType }}</td> -->
            <td>{{ getRegionTypeLabel(row.regionType) }}</td> <!-- 显示类型标签 -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableComponent",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    name_label: {
      type: String,
      default: "起降区名称",
    },
    airspaceTypes: {  // 从父组件传入的映射数据
      type: Object,
      required: true,
    },
  },
  methods: {
    handleRowClick(index) {
      // 先将所有行的 isSelected 设置为 false
      this.tableData.forEach((row) => {
        row.isSelected = false;
      });
      this.$set(this.tableData, index, {
        ...this.tableData[index],
        isSelected: true,
      });
      this.$emit("row", this.tableData[index]);
    },
    // 根据name_label选择正确的类型数组
    getRegionTypeLabel(regionType) {
      let label = '未知类型';
      // 根据name_label选择对应的类型数组
      if (this.name_label === "起降区名称") {
        label = this.getLabelFromArray(this.airspaceTypes.updown, regionType);
      } else if (this.name_label === "航路名称") {
        label = this.getLabelFromArray(this.airspaceTypes.route, regionType);
      } else if (this.name_label === "工作区名称") {
        label = this.getLabelFromArray(this.airspaceTypes.task, regionType);
      }
      return label;
    },
    // 根据regionType值从对应数组中获取标签
    getLabelFromArray(array, value) {
      const matchedType = array.find((type) => type.value === value);
      return matchedType ? matchedType.label : '未知类型';
    }
  },
};
</script>

<style scoped>
.table_total {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.table-wrapper {
  width: 100%;
  height: 99%;
  background-color: transparent !important;
  overflow-y: auto;
  /* -ms-overflow-style: none;
  scrollbar-width: none;  */
}


.table1::-webkit-scrollbar {
  width: 0.125rem;
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 0.625rem;
}

.custom-table {
  width: 100%;
  height: 3.125rem;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate;
  /* 不合并单元格边框 */
  border-spacing: 0 0.25rem;
  /* 为行设置 5px 的垂直间距 */
  color: rgba(170, 178, 185, 1);
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-size: 0.875rem;
}

.custom-table tr {
  height: 2.125rem;
}

.custom-table td {
  padding: 0.3vh;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  text-align: left;
  border: 0.1px solid transparent;
  background-color: transparent;
}

.custom-table td:nth-child(1) {
  text-align: center;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
}

.custom-table th:nth-child(1) {
  text-align: center;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
}


.custom-table tbody tr:nth-child(odd) {
  background-image: url("../assets/img/module4/part1/table3.png");
  /* 奇数行背景图片 */
}

/* 偶数行背景图片 */
.custom-table tbody tr:nth-child(even) {
  background-image: url("../assets/img/module4/part1/table4.png");
  /* 偶数行背景图片 */
}


.custom-table tbody tr.table-row-selected {
  background-image: url("../assets/img/module4/part1/table_select.png");
  /* 行选中时背景 */
  background-size: cover;
}

/* 当行被 hover 时也使用选中背景图片 */
.custom-table tbody tr:hover {
  background-image: url("../assets/img/module4/part1/table_select.png");
  background-size: cover;
}

.custom-table tbody tr.table-row-selected {
  background-image: url("../assets/img/module4/part1/table_select.png");
  /* 行选中时背景 */
  background-size: cover;
}

/* 设置表头为固定位置 */
.custom-table thead {
  position: sticky;
  top: 0;
  /* 确保表头固定在顶部 */
  z-index: 1;
  /* 确保表头在内容上方 */
  background-size: 100% 100%;
  text-align: left;
  background-image: url("../assets/img/module4/part1/SketchPng94d57dca8bf834cfc73d945c5af729aa3d1ed9845aa60dd37514e4066014c1ae.png");
  background-size: cover;
  /* background-position: center; */
  color: rgba(170, 178, 185, 1);
  backdrop-filter: blur(5px);
}
</style>